
<template>
  <div class="image-upload">
    <el-upload
      action="http://up-z0.qiniup.com"
      list-type="picture-card"
      :data="qnData"
      :show-file-list="true"
      :file-list="fileList"
      :on-success="handleImageSuccess"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :on-progress="handleProgress"
      :before-upload="beforeImageUpload"
      :accept="accept"
    >

      <template #default>
        <el-icon>
          <plus />
        </el-icon>
      </template>
    </el-upload>
    <el-dialog
      v-model="previewDialog"
      :title="previewData.previewTitle"
    >
      <div style="min-height: 400px;max-height:600px;overflow-y:auto;">
        <img
          style="width: 100%;"
          :src="previewData.imageUrl"
          alt=""
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCurrentInstance, inject, reactive, ref, toRefs } from 'vue'
import { Plus } from '@element-plus/icons'

export default {
  name: 'UploadImage',
  components: {
    Plus,
  },
  props: {
    fileList: {
      type: Array,
      default: () => {},
    },
    fileSize: {
      type: Number,
      default: 1024 * 10, // 10M 超出后执行压缩
    },
    maxWH: {
      type: Number,
      default: 1920, // 图片长宽上限
    },
    accept: {
      type: String,
      default: 'image/png, image/jpeg, image/jpg',
    },
  },
  emits: ['change', 'on-success'],
  setup(props, context) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const path = import.meta.env.VITE_CRM_QINIU_URL
    var previewDialog = ref(false)
    var reactiveData = reactive({
      percent: 0,
      path: path,
      fileList: props.fileList || [],
      previewData: {
        imageUrl: '',
        previewTitle: '',
      },

      qnData: {
        token: '',
      },
    })

    const beforeImageUpload = async(file) => {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/png'
      if (!isJPG) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: '只能上传 jpg、jpeg或png 格式的图片!',
        })
        reactiveData.qnData.token = ''
        return Promise.reject(false)
      }

      const isRightSize = file.size / 1024 < props.fileSize
      if (!isRightSize) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: '请添加不超过10MB大小图片',
        })
        reactiveData.qnData.token = ''
        return Promise.reject(false)
      }
      var res = await api.common.GET_QINIU_TOKEN()
      if (res.code === 0) {
        reactiveData.qnData.token = res.data
      }
    }
    const handleImageSuccess = (res, file, fileList) => {
      console.log(res, file, fileList)
      var fileItem = {
        name: file.name,
        url: path + file.response.key,
      }
      reactiveData.fileList.push(fileItem)
      console.log(reactiveData.fileList)
      context.emit('update:file-list', reactiveData.fileList)
    }
    const handleRemove = (file, fileList) => {
      console.log(file, fileList)
      reactiveData.fileList = fileList
      context.emit('update:file-list', reactiveData.fileList)
    }
    const handlePreview = (file) => {
      console.log(file)
      reactiveData.previewData.imageUrl = file.url
      reactiveData.previewData.previewTitle = file.name
      previewDialog.value = true
    }
    const handleProgress = (event, file, fileList) => {
      reactiveData.percent = Number.parseInt(event.percent) // 这就是当前上传的进度
    }
    return {
      ...toRefs(props),
      ...toRefs(reactiveData),
      previewDialog,
      beforeImageUpload,
      handleImageSuccess,
      handleRemove,
      handlePreview,
      handleProgress,
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
